/**
 * @class   tm-button
 * @user    tm-button : margin, width, border-radius, background
 *          content : padding, border-radius
 */

/**
 *     tm-button
 */
[class|=tm-button] {
    border-radius: 5px;
    background-color: black;
    padding-left: 1px;
    padding-top: 1px;
    
    opacity: 0.75;
}

/**
 *     tm-button .content
 */
[class|=tm-button] .content {
    display: block;
    border-radius: 5px;
    padding: 4px;
    
    color: white;
    text-align: center;
    text-decoration: none;
    
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
    background: linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
}

/**
 *     hover
 */
[class|=tm-button]:hover {
    opacity: 1;
}
[class|=tm-button]:hover .content {
    box-shadow: 2px 2px 4px black;
}

/**
 *     active
 */
[class|=tm-button]:active {
    padding-left: 0px;
    padding-top: 0px;
}

/* red */
.tm-button-red {
    background-color: red;
}

/* lime */
.tm-button-lime {
    background-color: lime;
}

/* blue */
.tm-button-blue {
    background-color: blue;
}

/* yellow */
.tm-button-yellow {
    background-color: yellow;
}
.tm-button-yellow .content {
    color: black;
}

/* aqua */
.tm-button-aqua {
    background-color: aqua;
}

/* fuchsia */
.tm-button-fuchsia {
    background-color: fuchsia;
}

